import { computed, ref } from 'vue'
import { OrderSetTab, FeeSetTab } from './types'

/**
 * 放到这里，是为了解决之前放在里面时放在不同的地方调用，会生成不一样的数据，导致这边改了activeTab，但是在另外一边没变化
 * 这种实现方式不好，因为变量是全局的，会影响到全部使用到的地方，以后找到好的就替换
 */
const activeTab = ref<OrderSetTab['TabType']>('set')
const feeSetActiveTab = ref<FeeSetTab['TabType']>('orderCost')

const useActiveTab = () => {
  /**
   * 设置激活标签
   * @param {OrderSetTab['TabType']} tab - 标签名
   */
  const setActiveTab = (tab: OrderSetTab['TabType']) => {
    activeTab.value = tab
  }

  /**
   * 获取激活标签
   */
  const getActiveTab = computed(() => {
    return activeTab.value
  })

  /**
   * 设置费用设置激活标签
   * @param {FeeSetTab['TabType']} tab - 标签名
   */
  const setFeeCostActiveTab = (tab: FeeSetTab['TabType']) => {
    feeSetActiveTab.value = tab
  }

  /**
   * 获取激活标签
   */
  const getFeeCostActiveTab = computed(() => {
    return feeSetActiveTab.value
  })

  return {
    getActiveTab,
    getFeeCostActiveTab,
    setActiveTab,
    setFeeCostActiveTab,
  }
}

export { useActiveTab }
